<template>
  <div>
    <Header></Header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(n, index) in swiperImgs" :key="index">
        <img :src="n" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="hd">
      <p class="name">办公椅/工学椅</p>
      <p class="desc">久坐不累 关爱自己</p>
    </div>
    <van-grid :column-num="2" :gutter="10" style="margin-bottom: 1rem">
      <van-grid-item
        v-for="(n, index) in goods_info"
        :key="index"
        @click="todetail(n, index)"
      >
        <img :src="n.imageurl" alt="" />
        <div style="margin-top:0.5rem"><img src="https://yanxuan.nosdn.127.net/static-union/1652844771e1f775.png" alt="" style="width:1.2rem;margin-right: 0.2rem;margin-bottom: 0.2rem;">{{ n.goods_txt }}</div>
      </van-grid-item>
    </van-grid>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperImgs: [
        
        "https://yanxuan.nosdn.127.net/6ed470c0de9eb8211c1f157970e29102.jpg",
        "https://yanxuan.nosdn.127.net/6b865f58ebb36a134f76835009f896ed.jpg",
        "https://yanxuan.nosdn.127.net/130c5c3564a757ec4344d71e3a561222.jpg",
        "https://yanxuan.nosdn.127.net/static-union/165191180337b102.jpg",
      ],
      goods_info: [
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/e734ea5e1b5ab714a290d0fef4269961.png",
          goods_txt: "开拓者系列 经典爆款护脊人体工学椅",
          txt: 1,
          swiperImgs: [
            "https://yanxuan-item.nosdn.127.net/6a9cbc6d63e2376135b1ddf93c99ab90.jpg",
            "https://yanxuan-item.nosdn.127.net/2dfd0e6a2afee62eb9021bb75623a1a6.jpg",
            "https://yanxuan-item.nosdn.127.net/16d1e58b60d78b5379d411a99b3774a8.jpg",
          ],
          introduceImgs: [
            "https://yanxuan-item.nosdn.127.net/c282cc696ed5813e8fed5c1af278bde3.gif",
            "https://yanxuan-item.nosdn.127.net/c282cc696ed5813e8fed5c1af278bde3.gif",
            "https://yanxuan-item.nosdn.127.net/c282cc696ed5813e8fed5c1af278bde3.gif",
            "https://yanxuan-item.nosdn.127.net/c282cc696ed5813e8fed5c1af278bde3.gif",
          ],
          tree_v: [
            {
              id: "1",
              name: "开拓者系列 经典爆款护脊人体工学椅P2-上下可调腰靠",
              imgUrl:
                "https://yanxuan-item.nosdn.127.net/e734ea5e1b5ab714a290d0fef4269961.png",
              price: 108800,
            },
            {
              id: "2",
              name: "开拓者系列 经典爆款护脊人体工学椅P3-前后上下可调腰靠",
              imgUrl:
                "https://yanxuan-item.nosdn.127.net/6a9cbc6d63e2376135b1ddf93c99ab90.jpg",
              price: 119900,
            },
          ],
          price: "1088.00",
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/b834de6e4ebd9374fb2bd359de3e2db8.png",
          goods_txt: "在家办公为你撑腰，围背转椅办公椅",
          swiperImgs: [
            "https://yanxuan-item.nosdn.127.net/08830e184fda74608c1b40cd6a86de9f.jpg",
            "https://yanxuan-item.nosdn.127.net/57c264f2d5b551727000bb9d2671179f.png",
            "https://yanxuan-item.nosdn.127.net/e4e25d829ae620e2ed73f0c4c20a931b.png",
          ],
           introduceImgs: [
            "https://yanxuan-item.nosdn.127.net/b08847aea25288f7ad6ad24831298175.gif",
            "https://yanxuan-item.nosdn.127.net/b08847aea25288f7ad6ad24831298175.gif",
            "https://yanxuan-item.nosdn.127.net/b08847aea25288f7ad6ad24831298175.gif",
          ],
          tree_v: [
            {
              id: "1",
              name: "在家办公为你撑腰，围背转椅办公椅",
              imgUrl:
                "https://yanxuan-item.nosdn.127.net/86139b6290e542b368e6c1976dbc96d4.png",
              price: 45600,
            },
          ],
          price: "456.00",
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/b15a153609f5f394e1f1c92565430a5f.png",
          goods_txt: "保护腰颈，高端人体工学办公椅",
          txt: 3,
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/3171097ea7765a47a1ebf06705ebb0dc.png",
          goods_txt: "基础版人体工学转椅 办公椅",
          txt: 4,
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/995ec8d3ff9fdbc07e8b1a43dc7e7035.jpg",
          goods_txt: "欧洲科技工学先锋，人体工学转椅",
          txt: 5,
        },
        {
          imageurl:
            "https://yanxuan-item.nosdn.127.net/2581da68835624f344c1f1cc60134290.png",
          goods_txt: "探索家系列3D动态追腰人体工学椅",
        },
      ],
    };
  },
  methods: {
    // 进入详细商品页面
    todetail(n, index) {
      this.$router.push("/detail");
      this.$store.commit("muGoods_info", n);
    },
  },
};
</script>

<style>
.hd {
  text-align: center;
}
.name {
  font-size: 0.5rem;
  font-weight: 400;
}
.desc {
  font-size: 0.3rem;
  color: rgba(113, 86, 86, 0.799);
  margin: 0.2rem;
}
</style>